<template>
	<div class="root">
		<div class="head">
			<div class="roots">
				<div class="title">
					<span @click="back"><text class="iconfont icon-arrow-left-bold"></text></span>
					<span>{{title}}</span>
					<span></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

	export default {
        props:["title"],
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		onShow:async function() {

  		},
		methods: {
			back(){
				this.$emit('back')
			}
		}
	}
</script>

<style scoped lang=scss>

	.head{
		height: 90rpx;
		background-color: #eee;
		padding-top: 52rpx;
		.roots{
			display:flex;
			align-items: center;
			width: 95%;
			margin:0 auto;
			.title{
				width: 90%;
				display:flex;
				align-items: center;
				justify-content:space-between;
				>span:nth-child(1){
					.iconfont{
						font-size:30rpx;
						transform:rotate(190deg);
					}
				}
				>span:nth-child(2){
					text-align: center;
					height: 60rpx;
					width: 320rpx;
					line-height: 60rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>
